<template>
	<view class="content">
		<!-- 标题 -->
		<view class="title">{{scienceDetail.title}}:</view>
		<!-- 图片 -->
		<!-- <view>
			<u--image :src="scienceDetail.scienceImagesList[0].images" shape="circle" width="160px" height="160px"
				class="images">
				图片加载失败的插槽
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u--image>
		</view> -->
		<!-- 视频资源 -->
		<video :src="scienceDetail.scienceImagesList[0].videos" class="videos"></video>
		<!-- 隔离栏 -->
		<u-gap height="20" bgColor="#1ba784" marginTop="190px"></u-gap>
		<!-- 文本内容 -->
		<view class="scienceText">
			<u-skeleton rows="3" :loading="loading" :avatar="true" :title="false">
				<u-avatar :src="scienceDetail.scienceImagesList[0].images" shape="circle"></u-avatar>
				<u--text :text="scienceDetail.scienceImagesList[0].content" size="20" align="center"></u--text>
				<u--text text="分享到微信" openType="share" type="success" class="weiXinShare"></u--text>
			</u-skeleton>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//sciences数据
				scienceDetail: {
					scienceImagesList: [{
						images: "",
						content: ""
					}]
				},
				//science文本是否展示
				loading: true
			}
		},
		methods: {
			loadScienceDetail(options) {
				this.$request(`/science/query/${options.id}`, "GET").then(res => {
					this.scienceDetail = res.data.data;
					//设置标题
					uni.setNavigationBarTitle({
						title: this.scienceDetail.title,
					})
				})
			}
		},
		//页面每次加载获取science
		onLoad(options) {
			this.loadScienceDetail(options)
			uni.$u.sleep(1000).then(() => {
				this.loading = false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 0rpx 20rpx;
		// border: 1px solid red;
		height: 300rpx;
		position: relative;

		.title {
			font-size: 40rpx;
			font-weight: 800;
		}

		.images {
			position: absolute;
			left: 50%;
			margin-left: -80px;
			margin-top: 30rpx;
		}

		.videos {
			position: absolute;
			left: 50%;
			margin-left: -160rpx;
			margin-top: 30rpx;
			width: 320rpx;
			height: 280rpx;
		}

		// .separateUGap {
		// 	margin-top: 200rpx;
		// }

		.scienceText {
			margin-top: 50rpx;

			.weiXinShare {
				margin-top: 20rpx;
			}
		}


	}
</style>